<template>
  <a-modal v-model="visible" :title="null" width="40vw" height="40vw" destroyOnClose :footer="null" :closable="false">
    <div class="comword">
      <a-input-search
        placeholder="搜索常用语"
        enter-button="搜索"
        size="large"
        @search="onSearch"
        class="comword_search"
      />
      <div class="comword_hint">* 单击选择常用语</div>
      <div class="comword_content">
        <!-- <div class="comword_search_content"> -->
        <div
          v-for="(item, index) in menuList"
          :key="index"
        >
          <div @click="addValue(item.content)" class="comword_content_piece">{{ item.content }}</div>
        </div>
        <!-- </div> -->
      </div>
    </div>
  </a-modal>
</template>

<script>
import { queryList } from '@/api/std/std_comword.js'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types'
import { Bus_FieldService } from '@/utils/formassembly/formfield.js'

export default {
  props: {
    applyid: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      field: null, // 确定后组件复制字段
      selectedValue: '', // 输入框内容
      menuList: [], // 常用语菜单
      visible: false,
      showFooter: null,
      currentUser: storage.get(APP_USER), // 登录人信息
    }
  },
  methods: {
    // 常用语确认
    hideModal() {},
    onSearch(value) {
      this.menuList = []
      queryList(value, this.currentUser.userId).then((res) => {
        if (res.code == 0) {
          this.menuList = res.data
          console.log(this.menuList, '查询后数据')
          if (this.menuList.length == 0) {
            // this.menuList = [{ content: '暂无数据' }]
            this.$message.error('暂无数据')
          }
        } else {
          this.$message.error('查询数据失败')
        }
      })
    },
    addValue(key) {
      this.selectedValue += key // 将选中的值赋给 selectedValue
      console.log(key, '点击成功了！', this.selectedValue)
      Bus_FieldService(this.applyid, this.field, this.selectedValue, this, this.$store.state)
      this.visible = false
    },
    showModal(field) {
      if (!field) {
        this.$message.error('未传入常用语赋值字段')
        return
      }
      this.selectedValue = ''
      this.field = field
      this.visible = true
      this.onSearch('')
    },
  },
}
</script>

<style lang="scss" scoped>
.comword {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  padding: 1vh;
  height: 30vh;
  &_hint {
    align-self: flex-start;
    margin-bottom: 1vh;
    color: #b3b3b3;
    font-size: 13px;
  }
  &_search {
    width: 38vw;
    margin-bottom: 1vh;
    // height: 30vh;
  }
  &_content {
    width: 38vw;
    height: 38vh;
    // border: 1px solid #000000;
    overflow: auto;
  }
  &_content_piece {
    cursor: pointer;
    width: 100%;
    padding: 1vh;
    margin-bottom: 1vh;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    background-color: #faf8f8;
    display: inline-flex;
    justify-content: left;
    align-items: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
  }
}
</style>